<template>
  <page-header-wrapper>
    <a-card>
      <p class="info">基本信息</p>
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :hideRequiredMark="true"
      >
        <div class="flex justify-end" v-if="Archive != 1">
          <a-button v-if="!!id && readOnly" type="primary" @click="readOnly = false" v-action:update>修改</a-button>
          <a-button v-else type="primary" @click="submit">保存</a-button>
        </div>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="项目地址：" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select v-model="form.projectId" style="width:200px" disabled>
                <a-select-option :value="item.projectId" v-for="item in repayList" :key="item.projectId">
                  {{ item.addr }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="客户名称：" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="clientName" style="width:200px" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="left">
          <a-form-model-item label="还款性质：" prop="nature">
            <a-radio-group v-model="form.nature" @change="Onchange" :disabled="readOnly">
              <a-radio :value="item.value" v-for="item in natures" :key="item.text">
                {{ item.text }}
              </a-radio>
            </a-radio-group>
            <a-input style="width:120px" v-model="form.otherName" :disabled="form.nature != 4 || readOnly" />
          </a-form-model-item>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="金额：" prop="amount">
              <m-input-number v-model="form.amount" class="length" :disabled="readOnly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="还款日期：" prop="repayDate">
              <a-date-picker v-model="form.repayDate" :disabled-date="disabledDate" :disabled="readOnly" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="left">
          <a-form-model-item label="银行：" prop="bank">
            <a-radio-group v-model="form.bank" :disabled="readOnly">
              <a-radio :value="item.value" v-for="item in banks" :key="item.text">
                {{ item.text }}
              </a-radio>
              <a-input style="width:120px" v-model="other" :disabled="form.bank != '其他' || readOnly" />
            </a-radio-group>
          </a-form-model-item>
        </a-row>
        <a-row v-if="form.nature == 1">
          <a-col :span="8">
            <a-form-model-item label="税款：" prop="levyIssuer">
              <a-select v-model="form.levyIssuer" :disabled="readOnly">
                <a-select-option :value="item" v-for="item in levy" :key="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="税款金额" prop="tax">
              <m-input-number :value="tax" class="length" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="left">
          <a-form-model-item label="备注：" prop="remarks">
            <a-textarea class="text" v-model="form.remarks" :rows="4" :disabled="readOnly"></a-textarea>
          </a-form-model-item>
        </a-row>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { natures, banks } from '@/dict'
import { updataRepay, getSingleRepay, getAddr, getList, getDetailList } from '@/api/common'
import moment from 'moment'
import { commonRule, dateRule } from '@/utils/rules'
export default {
  name: 'reviseRepay',
  components: {},
  props: [''],
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      natures,
      banks,
      repayList: [],
      clientName: '',
      other: '',
      Archive: 0,
      levy: ['Approver issuer levy', 'Non-resident withholding tax', '不适用'],
      id: '',
      start: null,
      end: null,
      readOnly: true,
      form: {
        projectId: '',
        nature: 1,
        amount: '',
        repayDate: '',
        bank: 'HSBC',
        levyIssuer: 'Approver issuer levy',
        tax: '',
        remarks: '',
        otherName: ''
      },
      rules: {
        projectId: commonRule,
        nature: commonRule,
        amount: commonRule,
        repayDate: dateRule,
        levyIssuer: commonRule
      }
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    tax() {
      if (this.form.levyIssuer == '不适用') {
        this.form.tax = 0
      } else {
        const a = this.form.levyIssuer == 'Approver issuer levy' ? (this.form.amount * 2) / 100 : this.form.amount / 10
        this.form.tax = a.toFixed(2)
      }
      return this.form.tax
    }
  },
  methods: {
    async init() {
      await this.getData()
      await this.Onchange()
    },
    disabledDate(endValue) {
      const start = this.start
      const end = this.end
      if (!start || !end) {
        return false
      }
      return start.valueOf() > endValue.valueOf() || end.valueOf() < endValue.valueOf()
    },
    async Onchange() {
      const form = {
        page: 1,
        limit: 1,
        projectIds: this.form.projectId
      }
      const resTime = await getList(form)
      const Time = resTime.result.data.list[0]
      this.start = Time.firstLoanTime ? moment(Time.firstLoanTime * 1000) : null
      this.end = Time.realEndTime
        ? moment(Time.realEndTime * 1000)
        : Time.sysEndTime
        ? moment(Time.sysEndTime * 1000)
        : null
    },
    async getData() {
      const projectId = this.$route.query.projectId
      const r = await getDetailList(projectId)
      this.Archive = r.result.data.Archive
      const addr = await getAddr()
      this.repayList = addr.result.data
      this.id = this.$route.query.id
      const res = await getSingleRepay(this.id)
      const data = res.result.data
      for (let k in this.form) {
        this.form[k] = data[k]
      }
      this.form.repayDate = moment(this.form.repayDate * 1000)
      // this.addr = data.addr
      this.clientName = data.clientName
    },
    submit() {
      const id = this.$route.query.id
      this.$refs.form.validate(valid => {
        if (valid) {
          const form = Object.assign({}, this.form)
          form.repayDate = Number(
            moment(form.repayDate)
              .startOf('day')
              .format('X')
          )
          form.tax = form.nature == 1 ? form.tax : 0
          if (form.bank == '其他') form.bank = this.other
          updataRepay(id, form)
        }
      })
      this.$router.back(-1)
    }
  },
  created() {}
}
</script>
<style lang="css" scoped>
.left {
  margin-left: -240px;
}
</style>
